




<template>
  <div>
     <div>
     </div>
    <div id="echartsdemo" ref="container"></div>
  </div>
</template>
<script>
import { Totalorder } from "@/api/order";
import * as ec from "echarts";
export default {
  data() {
    return {
      echartsinstance: null,
      options: {
        title: {
          text: "Rainfall vs Evaporation",
          subtext: "Fake Data",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        calculable: true,
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
          },
        ],
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "Rainfall",
            type: "bar",
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
              3.3,
            ],
            markPoint: {
              data: [
                { type: "max", name: "Max" },
                { type: "min", name: "Min" },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
          {
            name: "Evaporation",
            type: "bar",
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
            markPoint: {
              data: [
                { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
                { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
              ],
            },
            markLine: {
              data: [{ type: "average", name: "Avg" }],
            },
          },
        ],
      },
    };
  },
  mounted() {
    this.echartsinstance = ec.init(this.$refs.container);
    this.echartsinstance.setOption(this.options);
  },
  watch: {
    options() {
      this.echartsinstance.setOption(this.options);
    },
  },
  methods: {
    async Totalorderx(){
      let res =await Totalorder({id:this.$route.params.id})
      console.log(res);
    },
     
    
  },
  created() {
    this.Totalorderx()
 
  },
};
</script>
<style lang="css" scoped>
#echartsdemo {
  width: 100%;
  height: 600px;
}
</style>